<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- app 根容器 -->
  <!-- 文章详情，文章列表，这两个业务场景在这个app容器内容完成切换 -->
  <div id="app">
    <!-- router-link的作用，点击后可以切换路由地址，或者在地址栏直接敲路由地址 -->
    <!-- 切换的目的，显示对应的组件 -->
    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.min.js"></script>
  <script>
    // 组件配置对象
    // 文章列表组件配置对象
    const ArticleList = {
      template: `
        <ul>
          <li v-for="i in 4" :key="i">
            <router-link :to="'/article/1000'+i">文章{{i}}</router-link>
          </li>
        </ul>`
    }
    // 文章详情组件配置对象
    const ArticleItem = {
      // 配置了路由后，组件实例上有一个数据：$route.params 就是路径传参
      template: `<div>文章详情 id：{{$route.params.id}}</div>`
    }
    // 路由规则
    const routes = [
      {path:'/list', component: ArticleList},
      // 现在路由规则 /article 不能匹配到 /article/10001 
      // 下面的写法就是动态路由写法
      {path:'/article/:id', component: ArticleItem}
    ]
    // 初始化
    const router = new VueRouter({ routes })
    // 挂载在vue根实例
    new Vue({
      el: '#app',
      router
    })
  </script>
</body>
</html>